<template>
  <div class="br-layout-relative" v-loading="saveLoading" element-loading-text="正在保存,请稍等">
    <div class="br-layout-relative">
      <div class="br-layout-relative">
        <div class="br-layout-absolute" style="left:15px;right:15px;display: flex;height: 40px;line-height: 40px;">
          <div style="width: calc(100% - 300px);text-align: left;">
            {{name}}
          </div>
          <div style="width: 300px;text-align: right;">
            <el-button size="mini" @click="quit">取消</el-button>
            <el-button size="mini" @click="test">测试连接</el-button>
            <el-button type="primary" size="mini" @click="save">保存</el-button>
          </div>
        </div>
      </div>
      <div class="br-layout-absolute" style="top: 41px;left: 15px;bottom: 0;right: 15px;">
        <div class="br-form" style="padding: 0;">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本" name="first">
              <el-form size="mini" label-width="150px" label-position="left">
                <el-form-item label="数据连接名称" class="br-form-item">
                  <span slot="label" class="br-form-text">数据连接名称</span>
                  <el-input v-model="databaseForm.displayName" placeholder="数据连接名称"></el-input>
                </el-form-item>
                <el-form-item label="主机名称" class="br-form-item">
                  <span slot="label" class="br-form-text">主机名称</span>
                  <el-input v-model="databaseForm.hostname" placeholder="主机名称"></el-input>
                </el-form-item>
                <el-form-item label="端口号" class="br-form-item">
                  <span slot="label" class="br-form-text">端口号</span>
                  <el-input v-model="databaseForm.port" placeholder="端口号"></el-input>
                </el-form-item>
                <el-form-item label="数据库名称" class="br-form-item">
                  <span slot="label" class="br-form-text">数据库名称</span>
                  <el-input v-model="databaseForm.databaseName" placeholder="数据库名称"></el-input>
                </el-form-item>
                <template v-if="this.type==='ORACLE'">
                  <el-form-item label="数据表空间" class="br-form-item">
                    <span slot="label" class="br-form-text">数据表空间</span>
                    <el-input v-model="databaseForm.dataTablespace" placeholder="数据表空间"></el-input>
                  </el-form-item>
                  <el-form-item label="索引表空间" class="br-form-item">
                    <span slot="label" class="br-form-text">索引表空间</span>
                    <el-input v-model="databaseForm.indexTablespace" placeholder="索引表空间"></el-input>
                  </el-form-item>
                </template>
                <el-form-item label="账号" class="br-form-item">
                  <span slot="label" class="br-form-text">账号</span>
                  <el-input v-model="databaseForm.username" placeholder="账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" class="br-form-item">
                  <span slot="label" class="br-form-text">密码</span>
                  <el-input type="password" v-model="databaseForm.password" placeholder="密码"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="高级" name="second">
              <el-form :model="databaseForm" size="mini" label-position="left">
                <el-form-item label="支持布尔数据类型" class="brightness-form-label" style="width: 250px;">
                  <div slot="label" style="font-size: 12px;width: 200px;">支持布尔数据类型</div>
                  <el-checkbox v-model="databaseForm.supportBooleanDataType"></el-checkbox>
                </el-form-item>
                <el-form-item label="支持Timestamp数据类型" class="brightness-form-label" style="width: 250px;">
                  <div slot="label" style="font-size: 12px;width: 200px;">支持Timestamp数据类型</div>
                  <el-checkbox v-model="databaseForm.supportTimestampDataType"></el-checkbox>
                </el-form-item>
                <el-form-item label="标识符使用引号括起来" class="brightness-form-label" style="width: 250px;">
                  <div slot="label" style="font-size: 12px;width: 200px;">标识符使用引号括起来</div>
                  <el-checkbox v-model="databaseForm.quoteIdentifiersCheck"></el-checkbox>
                </el-form-item>
                <el-form-item label="标识符使用小写字母" class="brightness-form-label" style="width: 250px;">
                  <div slot="label" style="font-size: 12px;width: 200px;">标识符使用小写字母</div>
                  <el-checkbox v-model="databaseForm.lowerCaseIdentifiersCheck"></el-checkbox>
                </el-form-item>
                <el-form-item label="标识符使用大写字母" class="brightness-form-label" style="width: 250px;">
                  <div slot="label" style="font-size: 12px;width: 200px;">标识符使用大写字母</div>
                  <el-checkbox v-model="databaseForm.upperCaseIdentifiersCheck"></el-checkbox>
                </el-form-item>
                <el-form-item label="Preserve case of reserved words" class="brightness-form-label" style="width: 250px;">
                  <div slot="label" style="font-size: 12px;width: 200px;">标识符保留大小写</div>
                  <el-checkbox v-model="databaseForm.preserveReservedCaseCheck"></el-checkbox>
                </el-form-item>
                <el-form-item label="默认模式名称.在没有其他模式名时使用" class="br-form-item">
                  <span slot="label" class="br-form-text">默认模式名称.在没有其他模式名时使用</span>
                  <el-input v-model="databaseForm.preferredSchemaName" placeholder="默认模式名称.在没有其他模式名时使用"></el-input>
                </el-form-item>
                <el-form-item label="请输入连接成功后要执行的SQL语句，用分号(;)隔开" class="br-form-item">
                  <span slot="label" class="br-form-text">请输入连接成功后要执行的SQL语句，用分号(;)隔开</span>
                  <el-input type="textarea" :rows="8" v-model="databaseForm.connectSQL" placeholder="请输入连接成功后要执行的SQL语句，用分号(;)隔开"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="参数" name="third">
              <EditTable :initNum="10" :fit="true" :tableData="databaseForm.attributes" :columnData="attributesColumns" />
            </el-tab-pane>
            <el-tab-pane label="连接池" name="fourth">
              <el-form size="mini" label-width="150px" label-position="left">
                <el-form-item label="是否使用连接池" class="br-form-item">
                  <span slot="label" class="br-form-text">是否使用连接池</span>
                  <el-checkbox v-model="databaseForm.usingConnectionPool"></el-checkbox>
                </el-form-item>
                <div v-for="(poolParam,index) in databaseForm.poolParams" :key="index">
                  <el-form-item label="初始化连接数" class="br-form-item" v-if="poolParam.key==='initialSize'">
                    <span slot="label" class="br-form-text">初始化连接数</span>
                    <el-input v-model="poolParam.value" placeholder="初始化连接数" :disabled="!databaseForm.usingConnectionPool"></el-input>
                  </el-form-item>
                  <el-form-item label="最大活动连接数" class="br-form-item" v-if="poolParam.key==='maxActive'">
                    <span slot="label" class="br-form-text">最大活动连接数</span>
                    <el-input v-model="poolParam.value" placeholder="最大活动连接数" :disabled="!databaseForm.usingConnectionPool"></el-input>
                  </el-form-item>
                  <el-form-item label="最大空闲连接数" class="br-form-item" v-if="poolParam.key==='maxIdle'">
                    <span slot="label" class="br-form-text">最大空闲连接数</span>
                    <el-input v-model="poolParam.value" placeholder="最大空闲连接数" :disabled="!databaseForm.usingConnectionPool"></el-input>
                  </el-form-item>
                  <el-form-item label="最小空闲连接数" class="br-form-item" v-if="poolParam.key==='minIdle'">
                    <span slot="label" class="br-form-text">最小空闲连接数</span>
                    <el-input v-model="poolParam.value" placeholder="最小空闲连接数" :disabled="!databaseForm.usingConnectionPool"></el-input>
                  </el-form-item>
                  <el-form-item label="最大等待时间" class="br-form-item" v-if="poolParam.key==='maxWait'">
                    <span slot="label" class="br-form-text">最大等待时间（ms）</span>
                    <el-input v-model="poolParam.value" placeholder="最大等待时间" :disabled="!databaseForm.usingConnectionPool"></el-input>
                  </el-form-item>
                  <el-form-item label="校验连接SQL" class="br-form-item" v-if="poolParam.key==='validationQuery'">
                    <span slot="label" class="br-form-text">校验连接SQL</span>
                    <el-input v-model="poolParam.value" placeholder="校验连接SQL" :disabled="!databaseForm.usingConnectionPool"></el-input>
                  </el-form-item>
                  <el-form-item label="获取连接时校验" class="br-form-item" v-if="poolParam.key==='testOnBorrow'">
                    <span slot="label" class="br-form-text">获取连接时校验</span>
                    <el-checkbox v-model="poolParam.value" false-label="false" true-label="true" :disabled="!databaseForm.usingConnectionPool"></el-checkbox>
                  </el-form-item>
                  <el-form-item label="归还连接时校验" class="br-form-item" v-if="poolParam.key==='testOnReturn'">
                    <span slot="label" class="br-form-text">获取连接时校验</span>
                    <el-checkbox v-model="poolParam.value" false-label="false" true-label="true" :disabled="!databaseForm.usingConnectionPool"></el-checkbox>
                  </el-form-item>
                  <el-form-item label="空闲连接校验" class="br-form-item" v-if="poolParam.key==='testWhileIdle'">
                    <span slot="label" class="br-form-text">空闲连接校验</span>
                    <el-checkbox v-model="poolParam.value" false-label="false" true-label="true" :disabled="!databaseForm.usingConnectionPool"></el-checkbox>
                  </el-form-item>
                  <el-form-item label="空闲连接间隔（ms）" class="br-form-item" v-if="poolParam.key==='timeBetweenEvictionRunsMillis'">
                    <span slot="label" class="br-form-text">空闲连接间隔（ms）</span>
                    <el-input v-model="poolParam.value" placeholder="空闲连接间隔（ms）" :disabled="!databaseForm.usingConnectionPool"></el-input>
                  </el-form-item>
                  <el-form-item label="空闲连接超时丢弃" class="br-form-item" v-if="poolParam.key==='removeAbandoned'">
                    <span slot="label" class="br-form-text">空闲连接超时丢弃</span>
                    <el-checkbox v-model="poolParam.value" false-label="false" true-label="true" :disabled="!databaseForm.usingConnectionPool"></el-checkbox>
                  </el-form-item>
                  <el-form-item label="空闲连接最大空闲时间" class="br-form-item" v-if="poolParam.key==='removeAbandonedTimeout'">
                    <span slot="label" class="br-form-text">空闲连接最大空闲时间</span>
                    <el-input v-model="poolParam.value" placeholder="最大准备语句数" :disabled="!databaseForm.usingConnectionPool"></el-input>
                  </el-form-item>
                  <el-form-item label="启用准备语句池" class="br-form-item" v-if="poolParam.key==='poolPreparedStatements'">
                    <span slot="label" class="br-form-text">启用准备语句池</span>
                    <el-checkbox v-model="poolParam.value" false-label="false" true-label="true" :disabled="!databaseForm.usingConnectionPool"></el-checkbox>
                  </el-form-item>
                  <el-form-item label="最大准备语句数" class="br-form-item" v-if="poolParam.key==='maxOpenPreparedStatements'">
                    <span slot="label" class="br-form-text">最大准备语句数</span>
                    <el-input v-model="poolParam.value" placeholder="最大准备语句数" :disabled="!databaseForm.usingConnectionPool"></el-input>
                  </el-form-item>
                </div>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="集群" name="fifth">
              <el-form size="mini" label-width="150px" label-position="left">
                <el-form-item label="使用集群" class="br-form-item">
                  <span slot="label" class="br-form-text">使用集群</span>
                  <el-checkbox v-model="databaseForm.partitioned"></el-checkbox>
                </el-form-item>
                <EditTable :initNum="5" :fit="true" :tableData="databaseForm.partitionDatabaseList" :columnData="partitionColumns" />
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialog" :showClose="false" custom-class="custom-class">
      <div class="br-flex-center" v-loading="testLoading" element-loading-text="正在测试连接,请稍等">
        <div class="br-layout-relative br-flex-center" style="width: 450px;height: 250px;">
          <div class="br-text-align-center" style="width: 270px;height: 170px;" v-if="testStatus===0">
            <img style="margin-bottom: 20px;width: 96px;height: 96px;" src="../../../../../assets/success.png"></img>
            <div class="br-margin-bottom">连接成功</div>
          </div>
          <div class="br-text-align-center" style="width: 270px;height: 170px;" v-else-if="testStatus===1">
            <img style="margin-bottom: 20px;width: 96px;height: 96px;" src="../../../../../assets/fail.png"></img>
            <div class="br-margin-bottom">测试连接失败</div>
            <el-button size="mini" @click="foldMsg?foldMsg=false:foldMsg=true">{{foldMsg?'收起信息':'展开信息'}}</el-button>
            <el-button size="mini" @click="back">返回</el-button>
            <el-button type="primary" size="mini" @click="test">重新连接</el-button>
          </div>
        </div>
      </div>
      <div class="br-layout-relative  br-textarea-view" v-if="foldMsg" style="width: 430px;max-height: 300px;margin-left: 10px;">
        {{message}}
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    test,
    save
  } from '@/api/database/database'
  import {
    mapGetters
  } from 'vuex'
  export default {
    props: {},
    computed: {
      ...mapGetters(['connection']),
      name() {
        return this.connection.name;
      },
      type() {
        return this.connection.type;
      },
      databaseForm() {
        return this.connection.item;
      }
    },
    data() {
      return {
        activeName: "first",
        dialog: false,
        testStatus: -1,
        message: "",
        foldMsg: false,
        testLoading: false,
        saveLoading: false,
        poolSetting: false,
        seniorSetting: false,
        jdbcSetting: false,
        emptyText: "请设置JDBC参数",
        partitionColumns: [{
          label: '分区ID',
          prop: "partitionId",
          attributes: {
            type: "input"
          }
        }, {
          label: '主机名称',
          prop: "hostname",
          attributes: {
            type: "input"
          }
        }, {
          label: '端口',
          prop: "port",
          attributes: {
            type: "input"
          }
        }, {
          label: '数据库名称',
          prop: "databaseName",
          attributes: {
            type: "input"
          }
        }, {
          label: '用户名',
          prop: "username",
          attributes: {
            type: "input"
          }
        }, {
          label: "密码",
          prop: "password",
          attributes: {
            type: "input"
          }
        }],
        attributesColumns: [{
          label: '参数',
          prop: "key",
          attributes: {
            type: "input"
          }
        }, {
          label: "值",
          prop: "value",
          attributes: {
            type: "input"
          }
        }],
      }
    },
    methods: {
      quit() {
        this.$store.commit("CONNECTION_TEMPALTE", 0);
        this.$store.commit("CONNECTION_ITEM", null);
      },
      back() {
        this.dialog = false;
        this.foldMsg = false;
        this.message = "";
      },
      save() {
        this.saveLoading = true;
        this.databaseForm.type = this.type;
        save(this.databaseForm).then((res) => {
          this.saveLoading = false;
          if (res.data.status == 200) {
            this.quit();
          } else if (res.data.status == 500) {
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })
      },
      test() {
        this.dialog = true;
        this.testLoading = true;
        this.testStatus = -1;
        this.foldMsg = false;
        this.message = "";
        this.databaseForm.type = this.type;
        test(this.databaseForm).then((res) => {
          this.testLoading = false;
          if (res.data.status == 200) {
            this.testStatus = 0;
          } else if (res.data.status === 504) {
            this.testStatus = 1;
            this.message = res.data.msg;
          }
        })
      },
    },
    mounted() {},
    created() {
      if (!this.databaseForm) {
        this.$store.commit("CONNECTION_ITEM", {
          id: '',
          displayName: '',
          type: '',
          hostname: "",
          port: '',
          databaseName: '',
          username: "",
          password: "",
          dataTablespace: null,
          indexTablespace: null,
          supportBooleanDataType: true,
          supportTimestampDataType: true,
          quoteIdentifiersCheck: false,
          lowerCaseIdentifiersCheck: false,
          upperCaseIdentifiersCheck: false,
          preserveReservedCaseCheck: true,
          preferredSchemaName: "",
          connectSQL: "",
          usingConnectionPool: false,
          initialPoolSize: "",
          maximumPoolSize: "",
          poolParams: [{
              "key": "initialSize",
              "value": "10"
            },
            {
              "key": "maxActive",
              "value": "10"
            },
            {
              "key": "maxIdle",
              "value": "5"
            },
            {
              "key": "minIdle",
              "value": "0"
            },
            {
              "key": "maxWait",
              "value": "10000"
            },
            {
              "key": "validationQuery",
              "value": "select 1"
            },
            {
              "key": "testOnBorrow",
              "value": "true"
            },
            {
              "key": "testOnReturn",
              "value": "false"
            },
            {
              "key": "testWhileIdle",
              "value": "false"
            },
            {
              "key": "timeBetweenEvictionRunsMillis",
              "value": "-1"
            },
            {
              "key": "removeAbandoned",
              "value": "false"
            },
            {
              "key": "removeAbandonedTimeout",
              "value": "300"
            },
            {
              "key": "poolPreparedStatements",
              "value": "false"
            },
            {
              "key": "maxOpenPreparedStatements",
              "value": "-1"
            }
          ],
          attributes: [],
          partitioned: false,
          partitionDatabaseList: []
        });
      }
    },
  }
</script>

<style lang="less" scoped>
  /deep/ .el-tabs--border-card {
    border: 0;
  }

  /deep/ .el-dialog__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /deep/ .el-dialog {
    position: relative;
    top: 0;
    left: 0;
    width: 450px;
    min-height: 250px;
    margin: auto;
  }

  /deep/ .el-dialog .el-dialog__header {
    position: relative;
    display: none;
  }

  /deep/ .el-dialog .el-dialog__body {
    position: relative;
    padding: 0;
    width: 450px;
    min-height: 250px;
  }

  /deep/ .el-dialog .el-dialog__footer {
    position: relative;
    display: none;
  }
</style>
